<template>
  <el-dialog :title="title" width="800px" :visible.sync="visible" destroy-on-close @close="closeCallback">
    <div class="card">
      <p class="title"><i class="fa fa-th-large fa-lg"></i>用户详情</p>
      <el-descriptions title="用户信息" class="demo-ruleForm">
        <el-descriptions-item label="用户名">
          <el-tag size="small">{{user.uaccount}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="电话">{{user.utel}}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{user.uemail}}</el-descriptions-item>
        <el-descriptions-item label="姓名"><el-tag size="small">{{user.uname}}</el-tag></el-descriptions-item>
        <el-descriptions-item label="性别">{{user.ugender}}</el-descriptions-item>
        <el-descriptions-item label="积分">{{user.uintegral}}</el-descriptions-item>
        <el-descriptions-item label="禁用状态" span="2"><el-switch v-model="user.udelete" @change="changeState"></el-switch></el-descriptions-item>
        <el-descriptions-item label="密码"><el-button type="warning" size="mini" @click="resetPassword">重置密码</el-button></el-descriptions-item>
        <el-descriptions-item label="注册时间" span="3"><i class="el-icon-time"></i>{{user.uregtime}}</el-descriptions-item>
        <el-descriptions-item label="备注" span="3">{{user.uremarks}}</el-descriptions-item>
      </el-descriptions>
    </div>
  </el-dialog>
</template>

<script>
import users from "../../api/apis/user/users"
import execute from "../../utils/constant/execute"
import stateCode from "../../utils/constant/stateCode"

export default {
  name: "userInfo",
  props: {
    title: { type: String, default: "用户详情" },
    dialogVisible: { type: Boolean, default: false },
    user: {}
  },
  data () {
    return {
      visible: this.dialogVisible
    }
  },
  methods: {
    closeCallback () {
      this.$emit("successCallback")
    },
    changeState () {
      let formDate = {"uid": this.user.uid, "udelete": this.user.udelete}
      users.fetchEditUsers(formDate).then((res) => {
        if (res.data.code === stateCode.OPRATION_SUCCESS) {
          this.$message({ type: execute.SUCCESS, message: res.data.msg })
        } else {
          this.$message({ type: execute.WARNING, message: res.data.msg })
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    resetPassword () {
      this.$confirm("确认要进行重置密码操作吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let formData = {"uid": this.user.uid, "upwd": "88888888"}
        users.fetchEditUsers(formData).then((res) => {
          if (res.data.code === stateCode.OPRATION_SUCCESS) {
            this.$message({ type: execute.SUCCESS, message: res.data.msg })
          } else {
            this.$message({ type: execute.WARNING, message: res.data.msg })
          }
        }).catch((error) => {
          console.log(error)
        })
      }).catch(() => {
        this.$message({
          type: execute.INFO,
          message: "已取消重置密码"
        })
      })
    }
  },
  filters: {
    formatDate (date, pattern) {
      var dt = new Date(date)
      var y = dt.getFullYear()
      var m = (dt.getMonth() + 1).toString().padStart(2, "0")
      var d = dt.getDate().toString().padStart(2, "0")
      var h = dt.getHours().toString().padStart(2, "0")
      var mi = dt.getMinutes().toString().padStart(2, "0")
      var s = dt.getSeconds().toString().padStart(2, "0")
      if (pattern.toLowerCase() === "yyyy-mm-dd") {
        return `${y}-${m}-${d}`
      } else {
        return `${y}-${m}-${d} ${h}:${mi}:${s}`
      }
    }
  },
  mounted () {
  }
}
</script>
<style scoped>
  .demo-ruleForm {
    width: 460px;
    padding-top: 25px;
  }
  .el-select {
    width: 100%;
  }
  .card {
    width: 560px;
    padding-bottom: 15px;
    margin: 0px auto;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-descriptions{
    width: 540px;
    margin: 10px;
    font-size: 12px;
  }
</style>
